<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { login, register, getCode, getyxinfo } from "../../service/user";
import { setLocal } from "../../utils/utils";
import { Toast } from "vant";
import { mainStore } from '../../store/main'

const messageStore = mainStore()
const router = useRouter();
const route = useRoute();
const LoginStatus = ref(false);
const username = ref("");
const password = ref("");
const code = ref("");
const userStatus = ref(true);
const userTxt = ref("登录");
const codeImage = ref(null);


// 去注册
const goRegister = () => {
  userStatus.value = false;
  userTxt.value = "注册";
  // 获取验证码
  getCodeFn()
  console.log("去注册", userStatus.value);
};

// 确定
const onSubmit = async (values) => {
  // 登录
  if (userStatus.value) {
    const { data } = await login({
      username: username.value,
      password: password.value,
    });
    console.log(data, "登录");
    if (data.code == 200) {
      LoginStatus.value = true;
      
      // 获取云信账号
      getyxinfoFn(username.value)
      messageStore.message.token = data.token
      messageStore.message.name = data.name
      messageStore.message.account = data.accid


      // 储存token
      setLocal("token", data.token);
      
      Toast.success("登录成功");
    }else{
      Toast.fail(data.message);

    }
  // 注册
  } else {
    const { data } = await register({
      username: username.value,
      password: password.value,
      code: code.value,
    });

    let strRegex = /^[a-zA-Z]{1}[0-9a-zA-Z_]{1,}$/;
    if(!strRegex.test(username)) {
      return Toast.fail("用户名输入错误");
    }
    
    if (data.code == 200) {
      Toast.success("注册成功");
      userStatus.value = true;

      // 获取云信账号
      getyxinfoFn(username.value)

    } else {
      Toast.fail(data.message);
    }
  }

};

// 获取验证码
const getCodeFn = async () =>  {
  // 获取验证码
  const { data } = await getCode();
  codeImage.value = data;
}

// 获取云信信息
const getyxinfoFn = async (username) => {
     const { data } = await getyxinfo({
      accid: username,
      name: username + "user",
    });
    console.log(data,'data');
    if(data.code == 200) {
      // store储存数据

      // 储存yx信息token
      setLocal("yv_token", JSON.stringify(data.data));

      // 跳转回去之前的页面
      router.push(route.query.redirect);
    }
}
onMounted( () => {
});
</script>
<template>
  <div>
    <van-nav-bar title="登录" />
    <h1 class="title">{{ userTxt }}</h1>
    <!-- 登录 -->
    <div class="login">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="code"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
            v-if="!userStatus"
          >
            <template #button>
              <img :src="`data:image/png;base64,${codeImage}`" @click="getCodeFn"/>
              <!-- <img :src="codeImage" alt="" /> -->
            </template>
          </van-field>
        </van-cell-group>
        <p class="register-txt" @click="goRegister">去注册</p>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.title {
  margin-top: 2rem;
  font-size: 1rem;
  text-align: center;
}
.login {
  margin-top: 3rem;
  .register-txt {
    padding-right: 0.4688rem;
    font-size: 0.42rem;
    text-align: right;
  }
}
</style>
